<template>
  <!-- 购买数量 -->
  <view class="card-purchase-quantity">
    <view class="card-purchase-quantity-left">购买数量</view>
    <view class="card-purchase-quantity-right">
      <view class="card-purchase-quantity-right-reduce" @click="rectangle">
        <i class="reduce-rectangle" />
      </view>
      <view class="card-purchase-quantity-right-number">
        <input :value="number" @blur="verification">
      </view>
      <view class="card-purchase-quantity-right-add" @click="add">
        <i class="reduce-rectangle" />
        <i class="reduce-rectangle-rotate" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    number: {
      type: Number,
      default: 0
    },
    minNumber: {
      type: Number,
      default: 0
    },
    maxNumber: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      modifyNumber: this.number
    }
  },
  methods: {
    // 减法
    rectangle() {
      this.$emit('rectangle')
    },
    // 加法
    add() {
      this.$emit('add')
    },
    // 验证数值是否在规范内完整
    verification(e) {
      const value = parseInt(e.detail.value)

      this.$emit('update:number', value)
      e.detail.value = this.number
      if (value < this.minNumber) {
        this.$emit('update:number', 5)
        console.log('触发', 123, this.number)
      } else if (value > this.maxNumber) {
        this.$emit('update:number', 5)
      }
    }
  }
}
</script>
<style>
/* 购买数量 */
.card-purchase-quantity {
  margin-top: 24rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: space-between;
}
.card-purchase-quantity-left {
  margin-top: 6rpx;
}
.card-purchase-quantity-right {
  width: 176rpx;
  height: 48rpx;
  border: 2rpx solid #cccccc;
  display: flex;
  text-align: center;
}
.card-purchase-quantity-right-reduce {
  width: 48rpx;
  height: 48rpx;
  border-right: 2rpx solid #cccccc;
}
.reduce-rectangle {
  width: 20rpx;
  height: 4rpx;
  background-color: #9b9b9b;
  text-align: left;
  margin-left: 16rpx;
  margin-top: 24rpx;
}
.reduce-rectangle-rotate {
  position: absolute;
  width: 20rpx;
  height: 4rpx;
  background-color: #9b9b9b;
  text-align: left;
  left: 16rpx;
  top: 24rpx;
  transform: rotate(90deg);
}
.card-purchase-quantity-right-number {
  height: 48rpx;
  width: 76rpx;
  line-height: 48rpx;
}
.card-purchase-quantity-right-add {
  position: relative;
  width: 48rpx;
  height: 48rpx;
  border-left: 2rpx solid #cccccc;
}
</style>
